import React, { type CSSProperties } from "react";
import { Button } from "szcd";
import { styled } from "@umijs/max";
import { type IFlowView } from "@/components/FlowView/useFlowView";
import FlowView from "../FlowView";

const Box = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .bar{
      display:flex;
      justify-content: end;
      gap: 8px;
    }
    .canvas{
        flex:1;
        background: #fff;
        width: 100%;
        height: 100%;
    }
`;

const CustomFlowView = (props: IFlowView & { style?: CSSProperties, className?: string, processNodeInfo?: any }) => {
  const { zoomViewport, fitViewport } = props;

  return <Box>
    <div className="bar">
      <Button
        size="small"
        onClick={() => { zoomViewport(true); }}
      >放大</Button>
      <Button
        size="small"
        onClick={() => { zoomViewport(false); }}
      >缩小</Button>
      <Button
        size="small"
        onClick={() => { fitViewport(); }}
      >适中</Button>
    </div>
    <FlowView {...props} />
  </Box>;
};

export default CustomFlowView;